<template>
  <div class="todo">
    <h3>ToDoList</h3>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input class="input" v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="text" @click="addItems">添加</el-button>
      </div>
      <el-radio-group class="tab-wrap" v-model="tabPosition">
        <el-radio-button @click.native="handleRouter('todo')" label="2">全部</el-radio-button>
        <el-radio-button @click.native="handleRouter('unfinish')" label="0">未完成</el-radio-button>
        <el-radio-button @click.native="handleRouter('finished')" label="1">完成</el-radio-button>
      </el-radio-group>
      <template v-if="todoLists.length>0">
        <div v-for="(item, index) in todoLists" :key="index" class="text item">
          <span
            class="con"
            :class="{'finished': item.finished}"
            @click="changeStatu(item.id)"
            :title="item.val"
          >{{ item.val }}</span>
          <el-button type="primary" size="mini" @click="deleteCon(item.id)">删除</el-button>
        </div>
      </template>
      <template v-else>
        <span class="none">暂无内容</span>
      </template>
    </el-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      input: "",
      tabPosition: '0'
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler:function(val) {
        console.log(val)
        switch (val.name) {
          case 'todo':
            this.tabPosition = '2'
            break;
          case 'finished':
            this.tabPosition = '1'
            break;
          default:
            this.tabPosition = '0'
        }
      }
    }
  },
  computed: {
    todoLists() {
        if(this.tabPosition === '1') {
            return this.$store.state.todoList.filter(item => item.finished);
        }else if(this.tabPosition === '0') {
            return this.$store.state.todoList.filter(item => !item.finished);
        }else {
            return this.$store.state.todoList
        }
    }
  },
  methods: {
    ...mapMutations(["deleItem", "addItem", "changeStatus"]),
    handleRouter(name){
      this.$router.push({
        name
      })
    },
    addItems() {
      let obj = {
        val: this.input,
        finished: false,
        id: new Date().getTime()
      };
      if (this.input.trim() === "") {
        this.$message({
          message: "请输入内容",
          type: "warning"
        });
      } else {
        this.addItem(obj);
        this.input = "";
      }
    },
    changeStatu(val) {
      this.changeStatus(val);
    },
    deleteCon(idx) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleItem(idx);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
.todo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.tab-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%)
}
.box-card {
  display: inline-block;
  width: 320px;
}
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  margin-right: 15px;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.con {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finished {
  text-decoration: line-through;
}
.none {
  display: inline-block;
  margin: 0;
  width: 100%;
  text-align: center;
  padding-top: 20px;
}
</style>
